<template>
  <div class="manage">
    <CommonSearch :modal="searchForm" :searchConfig="searchConfig">
      <el-form-item>
        <el-button type="primary" @click="add('add')">新增</el-button>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item></CommonSearch
    >
    <el-table :data="tableData" class="manage-table">
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row, scope.$index)"
            type="text"
            size="small"
            >修改</el-button
          >
          <el-button @click="deleteRow(scope.$index)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="tableData.length" :pagers="pagers"></el-pagination>
    <Dialog
      ref="Dialog"
      :modal="editItem"
      :searchConfig="searchConfig"
      :rules="rules"
      @cancel="cancel"
    ></Dialog>
  </div>
</template>

<script>
import CommonSearch from "@/components/CommonSearch.vue";
import searchMixin from "@/minixs/index";
import Dialog from "@/components/dialog.vue";
import { getUserList } from "@/api/user";
export default {
  components: { CommonSearch, Dialog },
  mixins: [searchMixin],
  data() {
    return {
      searchForm: {
        bigName: "",
        smallName: "",
        stuTotal: "",
        teaTotal: "",
      },
      searchConfig: [
        {
          value: "bigName",
          label: "业主名称",
          component: "el-input",
        },
        {
          value: "smallName",
          label: "业主名称",
          component: "el-input",
        },
        {
          value: "stuTotal",
          label: "业主名称",
          component: "el-input",
        },
        {
          value: "teaTotal",
          label: "业主名称",
          component: "el-input",
        },
      ],
      editItem: {
        bigName: "",
        smallName: "",
        stuTotal: "",
        teaTotal: "",
      },
      columns: [
        // 表头
        {
          prop: "bigName",
          label: "业务名称",
        },
        {
          prop: "smallName",
          label: "业主姓名",
        },
        {
          prop: "stuTotal",
          label: "业主手机号",
        },
        {
          prop: "teaTotal",
          label: "业主单元",
        },
      ],
      tableData: [
        {
          bigName: "test",
          smallName: "test",
          stuTotal: "test",
          teaTotal: "test",
        },
      ],
      rules: {
        // 校验规则
        bigName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        smallName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        stuTotal: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        teaTotal: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        teamTotal: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    add(type) {
      this.$refs.Dialog.open(type);
    },
    edit(item) {
      this.editItem = { ...item };
      this.add("edit");
    },
    deleteRemote(index) {
      // 删除接口
      this.$message.success("操作成功");
    },
    tableRemote() {
      // 查询接口
    },
  },
  mounted() {
    this.search();
  },
};
</script>


